<template>
  <div class="page">
    <div style="margin-bottom: 15px;display: flex;justify-content: flex-end;">
      <el-button type="primary" @click="flag = true"><i class="el-icon-plus"></i> 新增</el-button>
      <el-button type="danger" @click="del(null)"><i class="el-icon-delete"></i> 批量删除</el-button>
    </div>
    <div style="margin-bottom: 15px;">
      <el-table :data="bannerList" border @select="(item) => {selectList = item;}" @select-all="(item) => {selectList = item;}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="唯一编号" prop="id"></el-table-column>
        <el-table-column label="图片" prop="id">
          <template slot-scope="scope">
            <div>
              <el-image :src="$api+scope.row.bannerPath" style="width: 100px;" :preview-src-list="[$api+scope.row.bannerPath]"></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="排序" sortable>
          <template slot-scope="scope">
              <span v-if="!scope.row.update">{{scope.row.bannerOrder}}</span>
              <el-input v-model="scope.row.order" v-else></el-input>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <div>
              <el-tag v-if="!scope.row.isDel" size="mini">显示</el-tag>
              <el-tag v-else　type="danger" size="mini">不显示</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <div>
              <el-button type="primary" size="mini" @click="scope.row.update = true" v-if="!scope.row.update"><i class="el-icon-edit"></i> 修改</el-button>
              <el-button type="success" size="mini" v-else @click="updateSubmit(scope.row)"><i class="el-icon-edit"></i> 保存</el-button>
              <el-button type="info" size="mini" @click="scope.row.update = false" v-if="scope.row.update"><i class="el-icon-edit"></i> 取消</el-button>
              <el-button type="danger" size="mini" @click="selectList.push(scope.row); del(scope.row.id)" v-if="!scope.row.update"><i class="el-icon-delete"></i> 删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog width="35%" :visible.sync="flag" @close="close">
      <div slot="title">{{title}}</div>
      <div>
        <div style="display: flex;align-items: center;margin-bottom: 25px;">
          <div style="width: 120px;text-align: right;margin-right: 15px;"><i style="color: red;">*</i> 排序号：</div>
          <div style="width: calc(100% - 120px - 15px);">
            <el-input-number v-model="bannerObj.bannerOrder" controls-position="right" :min="1" :max="10"></el-input-number>
          </div>
        </div>
        <div style="display: flex;align-items: center;">
          <div style="width: 120px;text-align: right;margin-right: 15px;"><i style="color: red;">*</i> 图片：</div>
          <div style="width: calc(100% - 120px - 15px);">
            <el-upload class="upload-demo" drag :action="$api + '/banner/upload_image'" :on-success="uploadSuccess">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传图片格式文件，且不超过500kb</div>
            </el-upload>
          </div>
        </div>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="close" style="background-color: rgb(240,240,240);width: 120px;">取 消</el-button>
        <el-button type="primary" @click="save" style="width: 120px;">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "manage-banner",
    data() {
      return {
        bannerList: [],
        flag: false,
        bannerObj:{
          bannerOrder:1,
          bannerPath:'',
        },
        title: "",
        selectList:[]
      }
    },
    methods: {
      initPage() {
        this.bannerList = [];
        this.$get("/banner/list").then(res => {
          if (res.code == 200) {
            res.data.forEach(item => {
              item.update = false;
              item.order = item.bannerOrder;
              this.bannerList.push(item)
            });
          }
        })
      },
      close() {
        this.flag = false
        this.bannerObj.bannerOrder = 1
      },
      save() {
        if(this.bannerObj.bannerPath.length == 0) return this.$message.warning("请上传图片");
        this.$post('/banner/add_banner', this.bannerObj).then(result => {
           if(result.code == 200){
             this.initPage();
             this.flag = false;
             return this.$message.success("上传成功");
           }
           return this.$message.warning("上传失败");
        })
      },
      del() {
        if(this.selectList.length == 0) return this.$message.warning("请选择要删除的轮播图");
        let ids = []
        this.selectList.forEach(item => ids.push(item.id));
        this.$confirm("是否要删除轮播图？？").then(abc => {
          this.$del('/banner/delete', {ids: ids.toString()}).then(result => {
            if(result.code == 200){
              this.initPage();
              return this.$message.success("删除成功");
            }
            this.$message.warning("删除失败");
          })
        }).catch(cancel => {this.selectList = []})
      },
      updateSubmit(item){
         this.$confirm("是否修改该轮播图的内容？").then(abc => {
           item.bannerOrder = item.order;
           this.$post('/banner/updateInfo', item).then(result => {
             if(result.code == 200){
                this.initPage();
                return this.$message.success("修改成功");
             }
             return this.$message.warning("修改失败");
           })
         })
      },
      uploadSuccess(response, file, fileList){
        this.bannerObj.bannerPath = response.data;
      }
    },
    created() {
      this.initPage()
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    border-radius: 8px;
    background-color: #fff;
    min-height: calc(100vh - 105px);
    box-sizing: border-box;
    padding: 15px;
  }
</style>
